<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">
      
   		<f:loadBundle basename="resources" var="msg" />
		
		<h:head>
	   	<link href="#{facesContext.externalContext.requestContextPath}/css/theme.css" rel="stylesheet" type="text/css" />  
		<title>Brasileirão 2011</title>
		<style type="text/css">
			body {
				margin: 20px 0;
				font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
				font-size: 11px;
				color: #A1A1A1;
			}
			
			#header {
				width: 928px;
				height: 132px;
				margin: 0 auto;
				border-bottom: 3px solid #FFFFFF;
				background: #222 url('../img/header.jpg') no-repeat;
				text-align: center;
			}
			
			#content {
				width: 928px;
				margin: 0 auto;
			}

			#colOne {
				float: left;
				width:22%
			}

			#colTwo {
				float: right;
				width:76%;
				padding-bottom: 0;
    			padding-left: 0;
    			padding-top: 0;
			}
			
			#footer {
				clear: both;
				width: 928px;
				margin: 0 auto;
				padding-top: 40px;
				background: url(images/img11.gif) repeat-x;
			}
			.historia{
				 color: #333333;
				 font-size: 12px;
			}
		</style>
		
	</h:head>
	<h:body>
		<f:view>
			<h:form id="commonform">	
				<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();">  
					<p:dialog modal="true" widgetVar="statusDialog" header="#{msg.carregando}"   
        					  draggable="false" closable="false">  
    					<p:graphicImage value="/img/ajax-loader.gif" />  
					</p:dialog>  
				</p:ajaxStatus>
				<div id="header">
					<p:graphicImage value="/img/titulo.png" style="width:100%; height:100%;"/>
				</div>
				
				<div id="content">
					<div class="title ui-widget-header ui-corner-all">
						<div style="padding-left:10px">
						<h:link outcome="/pages/inicio">
							<h:outputText value="Inicio" /> 	
						</h:link>
						</div>
					</div>	
					<div id="colOne">
						<p:menu  id="menu" widgetVar="myMenu"  > 
		        			<p:submenu label="#{msg.espaco_torcedor}">
								<p:menuitem value="#{msg.meu_time}" />
								<p:menuitem value="#{msg.historico_jogos}" />
								<p:menuitem value="#{msg.proximos_jogos}" />
							</p:submenu>
							<p:submenu label="#{msg.gerencial}">
								<p:menuitem value="#{msg.gerenciar_times}" url="/pages/cbf/manterClube.xhtml" />
								<p:menuitem value="#{msg.gerenciar_torcedor}"  />
								<p:menuitem value="#{msg.estadios}" />
							</p:submenu>
							<p:submenu label="#{msg.galeria}">
								<p:menuitem value="#{msg.fotos}"  />
							</p:submenu>
	        			</p:menu>
					</div>
					
					<div id="colTwo">
						<ui:insert name="conteudo">Area para conteudo</ui:insert>
					</div>
				</div>
				
				<div id="footer">
					<p></p>
				</div>
			</h:form>
		</f:view>
	</h:body>
</html>